<template>
  <div class="home-index-module-a-compontent">
    <div class="card-item stylea">
      <div class="card-row1">
        <div class="card-icon-frame">
          <div class="card-icon-box">
            <div class="card-icon-circle"></div>
            <div class="card-icon-font">
              <a-icon type="export" />
            </div>
          </div>
        </div>
        <div class="crad-num">{{count.out}}</div>
      </div>
      <div class="card-row2">出库任务量</div>
    </div>
    <div class="divider"></div>
    <div class="card-item styleb">
      <div class="card-row1">
        <div class="card-icon-frame">
          <div class="card-icon-box">
            <div class="card-icon-circle"></div>
            <div class="card-icon-font">
              <a-icon type="import" />
            </div>
          </div>
        </div>
        <div class="crad-num">{{count.in}}</div>
      </div>
      <div class="card-row2">入库任务量</div>
    </div>
    <div class="divider"></div>
    <div class="card-item stylea">
      <div class="card-row1">
        <div class="card-icon-frame">
          <div class="card-icon-box">
            <div class="card-icon-circle"></div>
            <div class="card-icon-font">
              <a-icon type="export" />
            </div>
          </div>
        </div>
        <div class="crad-num">{{count.move}}</div>
      </div>
      <div class="card-row2">移库任务量</div>
    </div>
  </div>
</template>

<script>
import { GeInOutTotalNumber} from '@/api/modular/system/homeManage'
export default {
  name:'homeIndexModuleACompontent',
  data(){
    return {
      count:{
        in:0,
        out:0,
        move:0
      }
    }
  },
  methods:{
    init(){
      this.getData()
    },
    getData(callback){
      GeInOutTotalNumber().then((d)=>{
        this.count.in = d.data.rukuNum || 0
        this.count.out = d.data.chukuNum || 0
        this.count.move = d.data.yikuNum || 0
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    }
  },
  mounted(){
    this.init()
  }
}
</script>

<style lang="less" scoped>
.home-index-module-a-compontent{
  display: flex;
  .divider{
    width:24px;
    flex-shrink: 0;
  }
  .card-item{
    width: 1px;
    flex-grow: 1;
    height:120px;
    border-radius: 6px;
    &.stylea{
      background-image: linear-gradient(115.159deg, rgb(252, 198, 135) 0%, rgb(249, 211, 34) 1%, rgb(248, 56, 0) 99%, rgb(242, 134, 160) 100%);
    }
    &.styleb{
      background-image: linear-gradient(115.159deg, rgb(127, 254, 216) 0%, rgb(54, 208, 220) 0%, rgb(90, 134, 229) 100%, rgb(9, 189, 254) 100%);
    }
    .card-row1{
      width:100%;
      display: flex;
      .card-icon-frame{
        flex-shrink: 0;
        padding:16px 10px 0 16px;
        .card-icon-box{
          width: 60px;
          height: 60px;
          position: relative;
        }
        .card-icon-circle,.card-icon-font{
          position: absolute;
          top:0;
          left:0;
          width: 100%;
          height: 100%;
        }
        .card-icon-circle{
          z-index: 10;
          border-radius: 50%;
          opacity: 0.1;
          background-color: #fff;
        }
        .card-icon-font{
          z-index: 20;
          display: flex;
          align-items: center;
          justify-content: center;
          color:#fff;
          font-size: 32px;
        }
      }
      .crad-num{
        flex-grow: 1;
        display: flex;
        white-space:nowrap;
        align-items: center;
        color: #fff;
        justify-content: flex-end;
        padding-right: 16px;
        font-size: 28px;
        font-weight: 700; 
        overflow: hidden;
      }
    }
    .card-row2{
      color:#fff;
      font-size: 20px;
      font-weight: 400;
      padding-right: 16px;
      text-align: right;
      white-space:nowrap;
      overflow: hidden;
    }
  }
}
</style>